<script setup lang="ts">
import { computed, h, ref } from 'vue';
import { App } from 'ant-design-vue';
import { SettingFilled, QuestionCircleOutlined } from '@ant-design/icons-vue';
import { useSettingView } from '../../../composables';
import { SPONSOR_DATA } from '../../../game/data/sponsor';

const { modal } = App.useApp();

const { open } = useSettingView();

const showSponsor = ref(false);
const renderSponsorData = computed(() => {
  return SPONSOR_DATA.sort((a, b) => {
    return b.amount - a.amount;
  }).slice(0, 100);
});

function onOpenSponsorClick() {
  showSponsor.value = true;
}

function sponsorClass(index: number) {
  switch (index) {
    case 0:
      return 'text-2xl font-bold';
    case 1:
      return 'text-xl font-bold';
    case 2:
      return 'text-lg font-bold';
    default:
      return '';
  }
}

function onHelpClick() {
  modal.info({
    title: '讲解',
    content: `『功德榜』是各位为爱发电的道友的天榜，显示前一百名。（暂时无特殊奖励，理性发电，不要影响你的生活，感谢各位发电的道友，祝你们发大财(●'◡'●)）`,
    okText: '知道了',
  });
}
</script>

<template>
  <div
    class="p-2 flex-none flex items-center justify-between border-0 border-b border-solid border-border"
  >
    <a-button @click="onOpenSponsorClick">功德榜</a-button>
    <a-button type="text" :icon="h(SettingFilled)" @click="open"></a-button>
    <a-modal
      v-model:open="showSponsor"
      wrap-class-name="sponsor-modal"
      :footer="false"
      :closable="false"
    >
      <div class="w-full h-full flex flex-col">
        <div
          class="flex-none py-2 text-lg font-bold text-center border-0 border-b border-solid border-border relative"
        >
          <div class="absolute right-2 top-1/2 transform -translate-y-1/2">
            <a-button :icon="h(QuestionCircleOutlined)" @click="onHelpClick"
              >解惑</a-button
            >
          </div>
          <div>功德榜</div>
        </div>
        <div class="flex-1 overflow-auto py-4">
          <div class="flex flex-col gap-2">
            <div
              v-for="(item, index) in renderSponsorData"
              :key="index"
              :class="['flex justify-between px-4', sponsorClass(index)]"
            >
              <div>{{ item.name }}</div>
              <div>{{ item.amount }} 功德</div>
            </div>
          </div>
        </div>
        <div
          class="flex-none flex justify-end p-2 border-0 border-t border-solid border-border"
        >
          <a-button @click="showSponsor = false">关闭</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<style>
.sponsor-modal .ant-modal {
  width: 100vw;
  top: 0;
  padding-bottom: 0;
  margin: 0;
}
.sponsor-modal .ant-modal .ant-modal-content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: auto;
}
.sponsor-modal .ant-modal .ant-modal-body {
  flex: 1;
  overflow: auto;
}
</style>
